<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange"/>

    <a-divider/>
    <p>测试 IconSelector 组件 v-model 功能</p>
    <a-button @click="changeIcon('down')">改变 Icon-down</a-button>
    <a-divider type="vertical"/>
    <a-button @click="changeIcon('cloud-download')">改变 Icon-cloud-download</a-button>
  </a-card>
</template>

<script>
  import IconSelector from '@/components/IconSelector'

  export default {
    name: 'IconSelectorView',
    components: {
      IconSelector
    },
    data () {
      return {
        currentSelectedIcon: 'pause-circle'
      }
    },
    methods: {
      handleIconChange (icon) {
        console.log('change Icon', icon)
        this.$message.info( < span > 选中图标 < code > { icon } < /code></s
        pan >
      )
      },
      changeIcon (type) {
        this.currentSelectedIcon = type
      }
    }
  }
</script>
